<template>
  <div class="hello" v-if="isRedoal">
    <template v-if="!show">
      <div class="topheader"></div>
      <div
        style="
          border-bottom: 1px solid #ebebeb;
          display: flex;
          align-items: center;
          width: 90%;
          margin: 0 auto;
          padding: 20px 0;
        "
      >
        <div
          style="
            margin-left: 10px;
            font-size: 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          "
        >
          <div v-html="video.content"></div>
          <div
            style="
              display: flex;
              align-items: flex-end;
              justify-content: space-between;
            "
          >
            <div style="color: #c3c3c3">发布时间：{{ video.createTime }}</div>
            <!--          <div style="background-color: orange;color: #fff;padding:4px 6px;border-radius: 14px;font-size: 14px;">立即报名</div>-->
          </div>
        </div>
      </div>
      <div class="no-sliding">
        <div class="lasterstyle" v-if="video.choiceWay == 0">
          <van-radio-group v-model="changeSex">
            <div
              v-for="(item, index) in ligeList"
              :key="index"
              class="radiostyle"
            >
              <van-radio :name="item.id" checked-color="orange">{{
                item.content
              }}</van-radio>
            </div>
          </van-radio-group>
        </div>
        <div class="lasterstyle" v-if="video.choiceWay == 1">
          <van-checkbox-group v-model="checkList">
            <div
              v-for="(item, index) in ligeList"
              :key="index"
              class="radiostyle"
            >
              <van-checkbox :name="item.id" checked-color="orange"
                >{{ item.content }}
              </van-checkbox>
            </div>
          </van-checkbox-group>
        </div>
      </div>
      <div class="latsup">
        <el-button type="warning" @click="sunmit" class="tijiao"
          >提交</el-button
        >
      </div>
    </template>
    <van-popup
      v-model="show"
      round
      class="naire-content flex_tb_c"
      :close-on-click-overlay="false"
    >
      <div>{{ video.name }}</div>
      <div>
        {{
          video.choiceWay == 0
            ? "您只能做出一个选择哦~"
            : "您可以做出多个选择哦~"
        }}
      </div>
      <div>结束时间： {{ video.endTime }}</div>
      <van-button
        type="warning"
        class="bottom-btn"
        style="background: orange; border: none"
        size="large"
        round
        @click="show = false"
        >现在开始</van-button
      >
    </van-popup>
    <van-popup
      v-model="dati"
      round
      class="naire-content flex_tb_c"
      :close-on-click-overlay="false"
    >
      <div>{{ video.name }}</div>
      <div>您已参与，请勿重复参与~</div>
      <van-button
        type="warning"
        class="bottom-btn"
        style="background: orange; border: none"
        size="large"
        round
        @click="go"
        >返回</van-button
      >
    </van-popup>
  </div>
</template>

<script>
import request from "@/utils/request";
import { MessageBox, Toast } from "mint-ui";

export default {
  name: "prize",
  props: {
    msg: String,
  },
  data() {
    return {
      changeSex: "0",
      ligeList: [],
      video: "",
      checkList: [],
      isFirst: window.sessionStorage.getItem("first"),
      isRedoal: false,
      show: false,
      dati: false,
    };
  },

  async created() {
    if (this.$route.params.time) {
      window.location.reload();
    } else {
      this.isRedoal = true;
    }
    request({
      url: "/generator/vote/front/state",
      method: "get",
      params: { voteId: this.$route.query.row },
    }).then((response) => {
      console.log(response.state)
      if(response.state!=0){
        this.show = false;
        this.dati = true;
      }
    });
    await this.getVoteDetail(); //投票详情
    await this.showpaceTic(); //选项接口事件
  },

  methods: {
    getVoteDetail() {
      return request({
        url: "/generator/vote/front/info",
        method: "get",
        params: { voteId: this.$route.query.row },
      }).then((response) => {
        response.vote.endTime = this.riqi(response.vote.endTime * 1000);
        this.video = response.vote;
        this.show = true;
      });
    },
    go() {
      this.$router.replace({ name: "votelist" });
    },
    sunmit() {
      console.log("提交", this.changeSex);
      if (this.video.choiceWay == 0) {
        let query = {
          voteId: this.video.id,
          optionIds: this.changeSex,
        };
        request({
          url: "/generator/vote/front/vote",
          method: "get",
          params: query,
        }).then((response) => {
          console.log(response);
          Toast(response.msg);
          let row = JSON.stringify(this.video);
          if (this.isFirst == 0) {
            this.$router.replace({ name: "jumpGZH" });
          } else {
            this.$router.push({ name: "thanksuser", query: { row: row } });
          }
        });
      } else if (this.video.choiceWay == 1) {
        const optionIds = this.checkList.toString();
        console.log(optionIds);
        let query = {
          voteId: this.video.id,
          optionIds: optionIds,
        };
        console.log(query);
        request({
          url: "/generator/vote/front/vote",
          method: "get",
          params: query,
        }).then((response) => {
          console.log(response);
          Toast(response.msg);
          let row = JSON.stringify(this.video);
          if (this.isFirst == 0) {
            this.$router.replace({ name: "jumpGZH" });
          } else {
            this.$router.push({ name: "thanksuser", query: { row: row } });
          }
        });
      }
    },
    showpaceTic() {
      let query = { voteId: this.$route.query.row };
      request({
        url: "/generator/option/front/list",
        method: "get",
        params: query,
      }).then((response) => {
        console.log(response.list);
        this.ligeList = response.list;
        this.changeSex = response.list[0].id;
      });
    },
    back() {
      this.$router.go(-1); //返回上一层
    },
    //时间戳转日期
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    riqi(shijianchuo) {
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        this.add0(m) +
        "-" +
        this.add0(d) +
        " " +
        this.add0(h) +
        ":" +
        this.add0(mm) +
        ":" +
        this.add0(s)
      );
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.hello {
  min-height: 100vh;
}
.meaning-s {
  margin-left: 25px;
  font-size: 15px;
  margin-top: 5px;
}

.meaning-g {
  margin-left: 25px;
  font-size: 15px;
  margin-top: 10px;
}
.latsup {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.radioNON {
  padding: 20px;
}
.topheader {
  width: 100%;
  background-color: black;
}
.Theadermain {
  height: 48px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  width: 95%;
  margin: 0 auto;
}
.headerimg {
  width: 0.8rem;
  margin-left: 10px;
  transform: rotate(180deg);
}
.tijiao {
  color: #fff;
  background-color: orange !important;
  border: none !important;
  min-width: 150px !important;
  border-radius: 30px !important;
}
.el-radio__input.is-checked .el-radio__inner {
  border-color: orange !important;
  background: orange !important;
}
.el-radio__input.is-checked + .el-radio__label {
  color: orange !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: orange !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: orange !important;
  background: orange !important;
}

.naire-content {
  width: 80%;
  height: 60%;
  padding: 40px 24px;
  border-radius: 10px;
  border: #f8f8f8 solid 1px;
}
.naire-content > div {
  width: 100%;
  text-align: center;
  color: #9a9a9a;
}
.naire-content > div:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.naire-content > div:nth-child(2) {
  letter-spacing: 1.5px;
  line-height: 20px;
}
.naire-content > div:nth-child(3) {
  font-size: 13px;
  color: #b6b6b6;
}
.lasterstyle {
  padding: 15px;
  width: 100%;
}
.radiostyle {
  width: 100%;
  padding: 20px 0;
}
.van-radio__label,
.van-checkbox__label,
.el-radio__label {
  width: calc(100% - 30px);
  word-wrap: break-word !important;
}
</style>
